<html lang="zh-CN">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <style>
        #TXLManage{
            position: relative;
            z-index: 1;
        }
        @media (max-width: 1366px) {
            #TXLManage .table-wrap {
                height: 500px !important;;
                overflow: auto;
            }
        }
    </style>
</head>
<body>
<div id="TXLManage" class="center_div" style="display:none;">
    <div style="float:left;width:19%;height: 99%;background: white;position: absolute;">
        <div style="height: 70%;overflow:auto;margin-top: 2%">
            <el-tree check-strictly
                     :load="loadChildren"
                     highlight-current
                     lazy
                     node-key="id"
                     :props="defaultProps"
                     :filter-node-method="filterNode"
                     ref="tree"
                     @node-click="loadData">
            </el-tree>
        </div>
    </div>
    <div style="float:right;width: 80%">
        <div class="searchForm" style="margin-top: 1%;margin-left: 1%">
            <el-form :inline="true" :model="searchForm">
                <template v-for="attr in searchForm">
                    <template v-if="attr.br"><br></template>
                    <el-form-item size="medium" :label="attr.label">
                        <template v-if="attr.type==='input'">
                            <el-input size="mini" v-model="attr.value" ></el-input>
                        </template>
                        <template v-if="attr.type==='time'">
                            <el-date-picker v-model="attr.value" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="时间" size="mini"></el-date-picker>
                        </template>
                        <template v-if="attr.type==='select'">
                            <el-select v-model="attr.value" :placeholder="attr.placeholder||'请选择'" size="mini">
                                <el-option
                                        v-for="item in attr.options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                    </el-form-item>
                </template>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="add">添加</el-button>
            <el-button type="primary" icon="el-icon-upload" size="mini">导入</el-button>
            <el-button type="primary" icon="el-icon-download" size="mini">导出</el-button>
        </div>
        <div class="table-wrap" style="width: 98%;margin-left: 1%">
            <el-table
                    :data="tableData"
                    style="width:100%;text-align: center;border-left:1px solid #EBEBEB"
                    header-cell-style="font-size:15px;text-align:center;color:#515A6E;padding:10px 0px 10px 0px !important;background:#F5F5F6;border:1px solid #EBEBEB;border-left:none"
                    cell-style="font-size:13px;text-align:center;color:#606266;padding:5px 0px 5px 0px !important;border:1px solid #EBEBEB;border-top:none;border-left:none"
            >
                <el-table-column v-for="title in tableTitle" :prop="title.prop" :label="title.label">
                </el-table-column>
                <template v-if="buttons && buttons.length!==0">
                    <el-table-column
                            class="align-right"
                            width="230px"
                            label="操作">
                        <template slot-scope="scope">
                            <el-button v-for="button in buttons"
                                       @click="operate(scope.row,button.href)" :type="button.type" class="el-button el-button--text el-button--medium">{{button.label}}
                            </el-button>
                        </template>
                    </el-table-column>
                </template>
            </el-table>
            <el-pagination
                    layout="prev, pager, next"
                    @current-change="changePageNum"
                    :current-page="pageNum"
                    :total="total">
            </el-pagination>
        </div>
    </div>
    <el-dialog :title="title" :visible.sync="open" width="30%" append-to-body>
        <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="名称">
        <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="选择框">
        <el-select v-model="form.region" placeholder="请选择">
        <el-option label="选择条件一" value="1"></el-option>
        <el-option label="选择条件二" value="2"></el-option>
        <el-option label="选择条件三" value="3"></el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="文本输入">
        <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item>
        <el-button type="primary">提交</el-button>
        <el-button>取消</el-button>
        </el-form-item>
        </el-form>
    </el-dialog>

</div>
</body>
<script>
    VueComponent.createTXLXManage=function () {
        if(window.TXLManageVue){
            return;
        }
        window.TXLManageVue = new Vue({
            el: "#TXLManage",
            data: {
                defaultProps: {
                    label: 'name',
                    isLeaf:'isLeaf'
                },
                searchForm: {
                    search1:{label: "查询条件一", value: "", type: "input", prop: "search1"},
                    search2:{label: "查询条件二", value: "", type: "select", prop: "search2", options: [{label: '查询一', value: '1'}, {label: '查询二', value: '2'}, {label: '查询三', value: '3'}]},
                    search3:{label: "查询条件三", value: "", type: "time",prop:"search3"}
                },
                tableTitle: [
                    {label: '终端名称', prop: 'NAME'},
                    {label: '终端号码', prop: 'NUMBER'},
                    {label: '归属集团', prop: 'fleetName'}
                ],
                tableData: [],
                total: 0,
                pageNum: 1,
                pageSize: 15,
                buttons: [{label: "修改", href: "plan/query"},{label: "删除", href: "plan/del"}],
                open:false,
                title:'',
                form: {
                    name: '',
                    region: '',
                    desc: ''
                }
            },
            mounted: function () {
                //this.query();
            },
            methods: {
                loadChildren: function (node, resolve) {
                    var that =this;
                    try {
                        if (node.data.type === 2) {
                            return resolve([]);
                        }
                    } catch (e) {

                    }
                    if(node.data){
                        that.getChild(node.data.id , node.data.type ,resolve);
                    }else{
                        setTimeout(function(){ that.getChild( window.fleetId , 0 ,resolve);}, 0);
                    }
                },
                getChild: function (id, type,resolve) {
                    var jsonData={
                        parentId:id,
                        type:type,
                        userId:window.DasConstant.userId,
                        managePriv:window.managePriv
                    };
                    axios.post('/scs/fleetManage/getFleet',jsonData)
                        .then(function (res) {
                            res = res.data;
                            if(res.success){
                                var childNodes = [];
                                if (res.obj) {
                                    childNodes = res.obj;
                                    childNodes.forEach(function (value,index) {
                                        childNodes[index].isLeaf=value.type===2;
                                    });
                                }
                                resolve(childNodes);
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                },
                filterNode:function(value, data) {
                    if (!value) return true;
                    return data.name.indexOf(value) !== -1;
                },
                loadData:function (node) {
                    var data = {
                        pageNum:this.pageNum,
                        pageSize:this.pageSize
                    };
                    data.fleetId=node.id;
                    axios.post('/scs/subscriberManage/getFleetSub', data)
                        .then(function (res) {
                            if (res.status === 200) {
                                var data = res.data;
                                if (res.data.success) {
                                    this.tableData=data.obj.list;
                                    this.total = data.obj.total/1.5;
                                } else {
                                    this.$message('');
                                }
                            } else {
                                this.$message('');
                            }
                        }.bind(this)).catch(function () {

                    }.bind(this));
                },
                query: function () {
                    var data = {
                        search1:this.$data.searchForm.search1.value||'',
                        search2:this.$data.searchForm.search2.value||'',
                        search3:this.$data.searchForm.search3.value||'',
                        pageNum:this.pageNum,
                        pageSize:this.pageSize
                    };
                    data.fleetId=window.fleetId;
                    axios.post('/scs/subscriberManage/getFleetSub', data)
                        .then(function (res) {
                            if (res.status === 200) {
                                var data = res.data;
                                if (res.data.success) {
                                    this.tableData=data.obj.list;
                                    this.total = data.obj.total/1.5;
                                } else {
                                    this.$message('');
                                }
                            } else {
                                this.$message('');
                            }
                        }.bind(this)).catch(function () {

                    }.bind(this));
                },
                add:function () {
                    this.open = true;
                    this.title = "添加";
                },
                operate:function (row,herf) {
                    if(href.indexOf('query') !== -1){

                    }else if(href.indexOf('del') !== -1){

                    }else{

                    }
                },
                changePageNum: function (val) {
                    this.pageNum = val;
                    this.query();
                },
            }
        });
    }
</script>
</html>
